<template>
	<div>
		<a-form-model ref="ruleForm" :model="editForm" :rules="rules">
			<a-form-model-item has-feedback label="用户留言基本信息">
				<h4>
				留言标题：{{editForm.title}} <br>
				留言人：{{editForm.name}} <br>
				联系方式：{{editForm.contact}} <br>
				留言日期：{{editForm.createTime}} <br>
				更新日期：{{editForm.updateTime}} <br>
				留言内容：</h4>
				<a-input v-model="editForm.content" disabled type="textarea" />
			</a-form-model-item>
			<a-divider></a-divider>
			<a-form-model-item has-feedback label="回复信息" prop="replyMsg">
				<a-input v-model="editForm.replyMsg" type="textarea" />
			</a-form-model-item> 
<!-- 			<a-form-model-item has-feedback label="留言状态" prop="status">
				{{editForm.status}}
			</a-form-model-item> -->
			<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" @click="submitForm('ruleForm')">
					Submit
				</a-button>
				<a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
					Reset
				</a-button>
			</a-form-model-item>
		</a-form-model>
	</div>
</template>

<script>
	import {getBoardById, updateBoard} from '@/api/System.js'
	export default {
		name: 'MsgBoardEdit',
		props: ['id'],
		data () {
			return {
				editForm: {
					id: this.id
				},
				rules: {
					replyMsg: [{
							required: true,
							message: '请输入回复的内容',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 300,
							message: 'Length should be 3 to 60',
							trigger: 'blur'
						}]
				}
			}
		},
		created() {
			this.getMsgBoardById(this.editForm.id)
		},
		methods: {
			async getMsgBoardById (id) {
				const {data : res} = await getBoardById(id)
				console.log(res)
				if (res.code !== 20005)
					return this.$message.error('加载留言板出错')
				this.editForm = res.data
				this.$message.success(res.msg)
			},
			submitForm(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						// 修改
						const {data : res} = await updateBoard(this.editForm)
						if (res.code !== 20008) 
							return this.$message.error('修改出错')
						this.$message.success(res.msg)
					} else {
						console.log('error submit!!');
						return false;
					}
					this.$emit('close',false)
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.$emit('close',false)
			},
		}
	}
</script>

<style>
</style>
